<template>
  <div >
    <li class="item">
      <div class="item-selector"><CheckButton :ischecked="item.ischecked" ></CheckButton></div>
      <div class="img"><img :src="item.image" alt=""></div>
      <div class="other-message">
        <h3 class="title common">{{item.title}}</h3>
        <p class="description common">{{item.desc}}</p>
        <div class="product-price-count">
        <span class="price">￥{{item.price}}</span>
        <span class="count">x{{item.count}}</span>
      </div>
      </div>

    </li>
  </div>
</template>
<script>
import CheckButton from '@/components/content/checkbutton/CheckButton'
export default {
  name:"CartListItem",
  components:{
    CheckButton,
  },
  props:{
    item:{
      type:Object,
      default:function(){
        return {}
      }
    }
  },
 

}
</script>
<style scoped>
.item{
  display: flex;
  list-style: none;
  width: 100%;
  padding: 5px;
  border-bottom: 1px solid #ccc;
}
.item-selector{
  width:20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.other-message{
  flex:1,
}
.img{
  width: 68px;
  height: 85px;
}
.img img{
  width: 100%;
  height: 100%;
  border-radius: 5px;
  object-fit: cover;
}
 .common {
  width: 200px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-weight: normal;
  padding: 5px;
  }
  .title {
    font-size: 14px;
    color: #111;
  }
  .description {
    font-size: 12px;
    color: #666;
  }
  .product-price-count {
    position: relative;
    font-size: 14px;
    top: 15px;
  }
  .price {
    position: absolute;
    left: 5px;
    color: var(--color-tint);
  }
  .count {
    position: absolute;
    right: 5px;
    font-size: 16px;
  }
</style>